<html>
 <head>
  <style type ="text/css">
  body { font-family: Andale Mono, monospace; }
  .header { font-size: large; font-weight: bold; }
  .scenarioSuccess { color: green; }
  .scenario { color: black; }
  .scenarioFailed { color: red; }
  .scenarioSkipped { color: teal; }
  .scenarioIncomplete { color: gray; }
  .scenarioStepsTable { margin-left: 10px; display: none; }
  .stepName { }
  </style>
  <script type="text/javascript">
  function showHide(nodeId, linkObj)
  {
    var subObj = document.getElementById('stepContainer' + nodeId);

    if (linkObj.innerHTML.indexOf('+')>0) {
      linkObj.innerHTML = linkObj.innerHTML.replace('+','-');
      subObj.style.display='block';
      subObj.style.width = '100%';
    } else {
      linkObj.innerHTML = linkObj.innerHTML.replace('-','+');
      subObj.style.display='none';
    }
  }
  </script>
 </head>
 <body>
  <table border="0">
{scenarios}
   <tr>
    <td>
     <p style="margin-top: 20px;" id="Summary" onclick="showHide('Summary', this)">[+] Summary:</p>
     <div style="margin-left: 10px; display:none" id="stepContainerSummary">
      <table border="0">
       <tr>
        <td width="250" class="scenarioSuccess">Successful scenarios:</td>
        <td class="scenarioSuccessValue">{successfulScenarios}</td>
       </tr>
       <tr>
        <td class="scenarioFailed">Failed scenarios:</td>
        <td class="scenarioFailedValue">{failedScenarios}</td>
       </tr>
       <tr>
        <td class="scenarioSkipped">Skipped scenarios:</td>
        <td class="scenarioSkippedValue">{skippedScenarios}</td>
       </tr>
       <tr>
        <td class="scenarioIncomplete">Incomplete scenarios:</td>
        <td class="scenarioIncompleteValue">{incompleteScenarios}</td>
       </tr>
      </table>
     </div>
    </td>
   </tr>
  </table>
 </body>
</html>
